<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线商城</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header>
        <nav class="navbar">
            <div class="logo">
                <h1>在线商城</h1>
            </div>
            <div class="search-box">
                <input type="text" id="searchInput" placeholder="搜索商品...">
                <button id="searchBtn">搜索</button>
            </div>
            <div class="nav-links">
                <button id="themeToggle" class="theme-toggle">
                    <i class="fas fa-moon"></i>
                </button>
                <a href="#" id="loginBtn" class="logged-out">登录</a>
                <a href="#" id="registerBtn" class="logged-out">注册</a>
                <a href="#" id="cartBtn" class="logged-in">购物车</a>
                <a href="#" id="ordersBtn" class="logged-in">我的订单</a>
                <a href="#" id="profileBtn" class="logged-in">个人信息</a>
                <a href="#" id="logoutBtn" class="logged-in">退出登录</a>
            </div>
        </nav>
    </header>

    <!-- 滚动文字公告栏 -->
    <div class="announcement-bar">
        <div class="announcement-content">
            <span>欢迎来到在线商城！</span>
            <span>新用户首单立减50元！</span>
            <span>全场商品满300减50！</span>
            <span>限时特惠，抢购从速！</span>
            <span>支持7天无理由退换货！</span>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <main>
        <!-- 轮播图部分 -->
        <section class="carousel-section">
            <div class="carousel-container">
                <div class="carousel-wrapper">
                    <div class="carousel-slide active">
                        <img src="https://img30.360buyimg.com/jdcms/s480x480_jfs/t1/286512/23/7659/172952/68396439Fe4829c61/8f9fd45488cbf1cd.jpg.avif" alt="促销活动1">
                        <div class="carousel-caption">
                            <h2>限时特惠</h2>
                            <p>全场商品低至5折</p>
                        </div>
                    </div>
                    <div class="carousel-slide">
                        <img src="https://img20.360buyimg.com/jdcms/s480x480_jfs/t1/302350/1/11827/46101/683ee713Fd404cc5a/c8dd134acc62aeee.jpg.avif" alt="促销活动2">
                        <div class="carousel-caption">
                            <h2>新品上市</h2>
                            <p>最新科技产品抢先体验</p>
                        </div>
                    </div>
                    <div class="carousel-slide">
                        <img src="https://img10.360buyimg.com/jdcms/s480x480_jfs/t1/300292/20/8448/149038/682d83a8Ffb87d09c/0e0b565b5e123731.jpg.avif" alt="促销活动3">
                        <div class="carousel-caption">
                            <h2>会员专享</h2>
                            <p>注册会员享专属优惠</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control prev">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <button class="carousel-control next">
                    <i class="fas fa-chevron-right"></i>
                </button>
                <div class="carousel-indicators">
                    <span class="indicator active"></span>
                    <span class="indicator"></span>
                    <span class="indicator"></span>
                </div>
            </div>
        </section>

        <section class="flash-sale-section">
            <div class="flash-sale-header">
                <div class="flash-sale-title">
                    <i class="fas fa-bolt"></i>
                    <span>限时秒杀</span>
                </div>
                <div class="flash-sale-countdown">
                    <span class="countdown-label">距结束还剩</span>
                    <div class="countdown-time">
                        <span class="time-block" id="hours">00</span>
                        <span class="time-separator">:</span>
                        <span class="time-block" id="minutes">00</span>
                        <span class="time-separator">:</span>
                        <span class="time-block" id="seconds">00</span>
                    </div>
                </div>
            </div>
            <div class="flash-sale-content">
                <div class="flash-sale-list" id="flashSaleList">
                    <!-- 秒杀商品将通过JavaScript动态加载 -->
                </div>
            </div>
        </section>

        <!-- 商品分类导航 -->
        <section class="category-section">
            <div class="category-nav">
                <ul id="categoryList">
                    <li><a href="#" data-category="all" class="active">全部商品</a></li>
                    <li><a href="#" data-category="electronics">电子产品</a></li>
                    <li><a href="#" data-category="clothing">服装服饰</a></li>
                    <li><a href="#" data-category="books">图书文具</a></li>
                </ul>
            </div>
        </section>

        <section class="products-section">
            <h2>商品列表</h2>
            <div id="productList"></div>
        </section>
    </main>

    <!-- 登录模态框 -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="loginUsername">用户名</label>
                    <input type="text" id="loginUsername" placeholder="请输入用户名" required>
                </div>
                <div class="form-group">
                    <label for="loginPassword">密码</label>
                    <input type="password" id="loginPassword" placeholder="请输入密码" required>
                </div>
                <button type="submit">登录</button>
                <div class="form-footer">
                    还没有账号？<a href="#" id="switchToRegister">立即注册</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="registerModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>用户注册</h2>
            <form id="registerForm">
                <div class="form-group">
                    <label for="registerUsername">用户名</label>
                    <input type="text" id="registerUsername" name="username" placeholder="请输入用户名" required>
                </div>
                <div class="form-group">
                    <label for="registerPassword">密码</label>
                    <input type="password" id="registerPassword" name="password" placeholder="请输入密码" required>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
                </div>
                <div class="form-group">
                    <label for="registerEmail">电子邮箱</label>
                    <input type="email" id="registerEmail" name="email" placeholder="请输入电子邮箱" required>
                </div>
                <div class="form-group">
                    <label for="registerAddress">收货地址</label>
                    <input type="text" id="registerAddress" name="address" placeholder="请输入收货地址" required>
                </div>
                <button type="submit">注册</button>
                <div class="form-footer">
                    已有账号？<a href="#" id="switchToLogin">立即登录</a>
                </div>
            </form>
        </div>
    </div>

    <!-- 个人信息模态框 -->
    <div id="profileModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>个人信息</h2>
            <div class="profile-info">
                <div class="info-group">
                    <label><i class="fas fa-user"></i> 用户名</label>
                    <span id="profileUsername"></span>
                </div>
                <div class="info-group">
                    <label><i class="fas fa-envelope"></i> 邮箱</label>
                    <span id="profileEmail"></span>
                </div>
                <div class="info-group">
                    <label><i class="fas fa-map-marker-alt"></i> 收货地址</label>
                    <span id="profileAddress"></span>
                </div>
            </div>
            <div class="profile-actions">
                <button id="editProfileBtn">
                    <i class="fas fa-edit"></i>
                    修改信息
                </button>
                <button id="changePasswordBtn">
                    <i class="fas fa-key"></i>
                    修改密码
                </button>
            </div>
        </div>
    </div>

    <!-- 修改信息模态框 -->
    <div id="editProfileModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>修改个人信息</h2>
            <form id="editProfileForm">
                <div class="form-group">
                    <label><i class="fas fa-user"></i> 用户名</label>
                    <input type="text" name="username" readonly>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-envelope"></i> 邮箱</label>
                    <input type="email" name="email" required>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-map-marker-alt"></i> 收货地址</label>
                    <input type="text" name="address" required>
                </div>
                <button type="submit">
                    <i class="fas fa-save"></i>
                    保存修改
                </button>
            </form>
        </div>
    </div>

    <!-- 修改密码模态框 -->
    <div id="changePasswordModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>修改密码</h2>
            <form id="changePasswordForm">
                <div class="form-group">
                    <label><i class="fas fa-lock"></i> 当前密码</label>
                    <input type="password" name="currentPassword" placeholder="请输入当前密码" required>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-key"></i> 新密码</label>
                    <input type="password" name="newPassword" placeholder="请输入新密码" required>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-check-circle"></i> 确认新密码</label>
                    <input type="password" name="confirmPassword" placeholder="请再次输入新密码" required>
                </div>
                <button type="submit">
                    <i class="fas fa-save"></i>
                    确认修改
                </button>
            </form>
        </div>
    </div>

    <!-- 购物车模态框 -->
    <div id="cartModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>购物车</h2>
            <div id="cartItems" class="cart-items">
                <!-- 购物车商品将通过JavaScript动态加载 -->
            </div>
            <div class="cart-summary">
                <div class="total">总计: <span id="cartTotal">￥0</span></div>
                <button id="checkoutBtn" class="checkout-btn">结算</button>
            </div>
        </div>
    </div>

    <!-- 订单模态框 -->
    <div id="ordersModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>我的订单</h2>
            <div id="orderList" class="order-list">
                <!-- 订单将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>

    <!-- 结算模态框 -->
    <div id="checkoutModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>确认订单</h2>
            <div class="checkout-info">
                <div class="delivery-info">
                    <h3>收货信息</h3>
                    <p>收货地址：<span id="checkoutAddress"></span></p>
                </div>
                <div class="order-items">
                    <h3>商品清单</h3>
                    <div id="checkoutItems"></div>
                </div>
                <div class="order-total">
                    <span id="checkoutTotal"></span>
                </div>
            </div>
            <button id="confirmOrderBtn" class="confirm-btn">提交订单</button>
        </div>
    </div>

    <!-- 商品详情模态框 -->
    <div id="productDetailModal" class="modal">
        <div class="modal-content product-detail-content">
            <span class="close">&times;</span>
            <div class="product-detail-container">
                <div class="product-detail-gallery">
                    <div class="main-image">
                        <img src="" alt="商品主图" id="detailMainImage">
                    </div>
                    <div class="thumbnail-list" id="thumbnailList">
                        <!-- 缩略图将通过JavaScript动态加载 -->
                    </div>
                </div>
                <div class="product-detail-info">
                    <h2 id="detailProductName"></h2>
                    <div class="product-price">
                        <span class="current-price" id="detailPrice"></span>
                        <span class="original-price" id="detailOriginalPrice"></span>
                    </div>
                    <div class="product-description" id="detailDescription"></div>
                    <div class="product-meta">
                        <div class="meta-item">
                            <i class="fas fa-box"></i>
                            <span>库存状态：</span>
                            <span id="detailStock"></span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-truck"></i>
                            <span>配送方式：</span>
                            <span>全国包邮</span>
                        </div>
                        <div class="meta-item">
                            <i class="fas fa-shield-alt"></i>
                            <span>商品保障：</span>
                            <span>7天无理由退换</span>
                        </div>
                    </div>
                    <div class="product-actions">
                        <div class="quantity-selector">
                            <button class="quantity-btn minus">-</button>
                            <input type="number" value="1" min="1" id="detailQuantity">
                            <button class="quantity-btn plus">+</button>
                        </div>
                        <button class="add-to-cart-btn" id="detailAddToCart">加入购物车</button>
                        <button class="buy-now-btn" id="detailBuyNow">立即购买</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 在线客服按钮 -->
    <button id="chatButton" class="chat-button">
        <i class="fas fa-comments"></i>
        在线客服
    </button>

    <!-- 在线客服模态框 -->
    <div id="chatModal" class="modal">
        <div class="modal-content">
            <div class="chat-header">
                <h2><i class="fas fa-headset"></i> 在线客服</h2>
                <span class="close">&times;</span>
            </div>
            <div id="chatMessages" class="chat-messages"></div>
            <div class="chat-input-container">
                <input type="text" id="chatInput" class="chat-input" placeholder="请输入您的问题...">
                <button id="sendButton" class="send-button">
                    <i class="fas fa-paper-plane"></i>
                    发送
                </button>
            </div>
        </div>
    </div>

    <footer>
        <p>&copy; 2024 在线商城. 保留所有权利.</p>
    </footer>

    <!-- 浮动广告 -->
    <div class="floating-ad" id="floatingAd">
        <img src="https://img14.360buyimg.com/n1/s720x720_jfs/t1/294025/33/3006/129299/682d98e5F67164538/09d945227440298b.jpg.avif" alt="限时特惠">
        <div class="floating-ad-content">
            <div class="floating-ad-title">限时特惠</div>
            <div class="floating-ad-description">新用户首单立减50元！</div>
            <a href="#" class="floating-ad-btn" id="adBtn">立即查看</a>
        </div>
    </div>

    <script src="js/main.js"></script>
</body>
</html> 